<template>
	<view class="content">
		<!-- 底部音乐栏 -->
		<van-row style="position: fixed;width: 100%;z-index: 100;bottom: 0;">
			<van-col span="24" offset="0">
				<wxy-audio :src="music.src" :play.sync="audioPlay" :poster="music.pic" :name="music.name"
					:author="music.author" :autoplay="autoPlay" @playTime="setPlayTime" @musicBar="setIsShow()">
				</wxy-audio>
			</van-col>
		</van-row>

		<!-- 弹窗显示音乐、歌词  -->
		<van-popup :show="isShow" position="bottom" custom-style="height: 45%;" @close="onClose" style="z-index: 101">
			<van-row style="padding: 20upx;" gutter="20">
				<van-col span="10" style="text-align: center;">
					<image :src="music.pic" style="width:200upx ;height:200upx ;"></image>
				</van-col>
				<van-col span="13">
					<view class="van-multi-ellipsis--l2 title">
						{{music.name}}
					</view>
					<view class="van-multi-ellipsis--l2 video_content " style="margin-bottom: 20upx;">
						{{music.author}}
					</view>
					<view style="margin-bottom: 20upx;color: #ff007f;">
						{{time}}
					</view>
				</van-col>
			</van-row>
			<view style="text-align: center;margin-bottom: 15upx;" class="van-multi-ellipsis--l2"><text>{{lyric0}}</text></view>
			<view style="text-align: center;color: #ff007f;margin-bottom: 15upx;" class="van-multi-ellipsis--l2"><text>{{lyric1}}</text>
			</view>
			<view style="text-align: center;margin-bottom: 150upx;" class="van-multi-ellipsis--l2">
				<text>{{lyric2}}</text>
			</view>
			<view style="bottom: 1upx;position: fixed;left: 0;right: 0;margin:0 auto">
				<van-row>
					<van-col span="8" style="text-align: center;">
						<image src="../../static/images/last.png" style="width:80upx ;height:80upx ;"
							@click="changeMusic(-1)"></image>
					</van-col>
					<van-col span="8" style="text-align: center;">
						<image src="../../static/images/play.png" style="width:80upx ;height:80upx; " v-if="audioPlay"
							@click="audioPlay = false"></image>
						<image src="../../static/images/pause.png" style="width:80upx ;height:80upx; " v-else
							@click="audioPlay = true"></image>
					</van-col>
					<van-col span="8" style="text-align: center;">
						<image src="../../static/images/next.png" style="width:80upx ;height:80upx ;"
							@click="changeMusic(1)"></image>
					</van-col>
				</van-row>
			</view>
		</van-popup>

		<view class="main-container">
			<!-- 搜索框 -->
			<view class="header" style="display: flex;align-items: center;">
				<slot></slot>
				<uni-search-bar radius="100" v-model="seaVal" @confirm="onSearch()" style="flex:auto;overflow: hidden;">
				</uni-search-bar>
			</view>
			
			<!-- 显示所有音乐 -->
			<scroll-view scroll-y="true" style="height: 78%;">
				<view class="musicItem" v-for="(item,i) in curResultsList" @click="play(item, i)" :key="i">
					<image :src="item.pic" mode="aspectFill" class="cover"></image>
					<view class="text-group">
						<view class="title">{{item.name}}</view>
						<view class="author">{{item.author}}</view>
					</view>
				</view>
				<van-row style="width: 100%;">
					<van-col span="12" style="text-align: center;">
						<van-button type="default" @click="page--" :disabled="!hasPrev"  color="#ff007f" plain> 上一页 </van-button>
					</van-col>
					<van-col span="12" style="text-align: center;">
						<van-button type="default" @click="page++" :disabled="!hasNext"  color="#ff007f" plain> 下一页 </van-button>
					</van-col>
				</van-row>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'musicComp',

		data() {
			return {
				value: '',
				audioPlay: false,
				musicNum: 0,
				autoPlay: false,
				music: {},
				isShow: false,
				musics: [],
				lrc: '',
				lyric0: "",
				lyric1: "",
				lyric2: "",
				time: "",
				page:0
			}
		},
		computed: {
			curResultsList() {
				return this.musics.slice(this.page * 20, this.page * 20 + 20)
			},
			hasPrev() {
				return this.page > 0;
			},
			hasNext() {
				return this.musics.length > this.page * 20 + 20;
			}
		
		},
		methods: {
			createLrcObj(lrc) {
				var oLRC = {
					ti: "", //歌曲名
					ar: "", //演唱者
					al: "", //专辑名
					by: "", //歌词制作人
					offset: 0, //时间补偿值，单位毫秒，用于调整歌词整体位置
					ms: [] //歌词数组{t:时间,c:歌词}
				};
				if (lrc.length == 0) return;
				var lrcs = lrc.split('\n'); //用回车拆分成数组
				for (var i in lrcs) { //遍历歌词数组
					lrcs[i] = lrcs[i].replace(/(^\s*)|(\s*$)/g, ""); //去除前后空格
					var t = lrcs[i].substring(lrcs[i].indexOf("[") + 1, lrcs[i].indexOf("]")); //取[]间的内容
					var s = t.split(":"); //分离:前后文字
					if (isNaN(parseInt(s[0]))) { //不是数值
						for (var i in oLRC) {
							if (i != "ms" && i == s[0].toLowerCase()) {
								oLRC[i] = s[1];
							}
						}
					} else { //是数值
						var arr = lrcs[i].match(/\[(\d+:.+?)\]/g); //提取时间字段，可能有多个
						var start = 0;
						for (var k in arr) {
							start += arr[k].length; //计算歌词位置
						}
						var content = lrcs[i].substring(start); //获取歌词内容
						for (var k in arr) {
							var t = arr[k].substring(1, arr[k].length - 1); //取[]间的内容
							var s = t.split(":"); //分离:前后文字
							oLRC.ms.push({ //对象{t:时间,c:歌词}加入ms数组
								t: (parseFloat(s[0]) * 60 + parseFloat(s[1])).toFixed(3),
								c: content
							});
						}
					}
				}
				oLRC.ms.sort(function(a, b) { //按时间顺序排序
					return a.t - b.t;
				});
				return oLRC;
				/*
				for(var i in oLRC){ //查看解析结果
				    console.log(i,":",oLRC[i]);
				}*/
			},
			setPlayTime(val) {
				console.log(val)
				this.time = val[0] + " / " + val[1]
				let self = this
				let v = val[0].split(":")
				let time = Number(v[0]) * 60 + Number(v[1])

				let olrc = this.createLrcObj(this.lrc)
				for (let i = 0; i < olrc.ms.length; i++) {
					let temp = olrc.ms[i].t.split(".")
					if (time == temp[0]) {
						self.lyric0 = i > 0 ? olrc.ms[i - 1].c : ""
						self.lyric1 = olrc.ms[i].c
						self.lyric2 = olrc.ms[i + 2].c
						break
					}
				}
			},
			async getlrc() {
				let self = this
				await this.$http.get('https://netease./lyric?id=' + this.music.id)
					.then(function({
						data
					}) {
						console.log(data)
						self.lrc = data.lrc.lyric

					}).catch(err => {
						console.log(err)
					})
			},
			async onSearch(val) {
				uni.showLoading({
					 title: '加载中'
				});
				this.page=0
				console.log(val)
				this.musics.length = 0
				let self = this

				await this.$http.get('https://netease/cloudsearch?keywords=' + val.value)
					.then(function({
						data
					}) {

						data.result.songs.forEach(e => {
							self.musics.push({
								src: "https://music.163.com/song/media/outer/url?id=" + e.id + ".mp3",
								id: e.id,
								name: e.name,
								pic: e.al.picUrl,
								author: e.ar[0].name
							})
						})

						console.log(self.musics)
					}).catch(err => {
						console.log(err)
					})

				uni.hideLoading();
			},
			changeMusic(n) {
				this.musicNum += n
				if (this.musicNum < 0) {
					this.musicNum = this.musics.length - 1
				} else if (this.musicNum >= this.musics.length) {
					this.musicNum = 0
				}
				this.play(this.musics[this.musicNum], this.musicNum)
				if (!this.autoPlay) this.autoPlay = true
				this.audioPlay = false

				console.log(this.audioPlay)
			},
			onClose() {
				this.isShow = false
			},
			setIsShow(val) {
				this.isShow = true
			},
			play(data, n) {
				this.musicNum = n
				this.music = data
				this.lyric0 = ""
				this.lyric1 = ""
				this.lyric2 = ""
				this.getlrc()
				this.audioPlay = true
			}
		},
		created: async function() {
			console.log(this.musics.length)
				let self = this
				 uni.showLoading({
					 title: '加载中'
				 });
				await this.$http.get('https://netease/top/song?type=0')
				.then(function({data}) {
					console.log(data)
					data.data.forEach(e => {
						self.musics.push({
							src: "https://music.163.com/song/media/outer/url?id=" + e.id + ".mp3",
							name: e.name,
							id: e.id,
							pic: e.album.blurPicUrl,
							author: e.artists[0].name
						})
					})
					self.music = self.musics[0]

				}).catch(err => {
					console.log(err)
				})
			uni.hideLoading();
			
		}
	}
</script>

<style lang="scss">
	
	.main-container {
		width: 100%;
		height: 100%;
		flex-direction: column;
		display: flex;
	}
	
	.musicItem {
		display: flex;
		margin: 20rpx 0;
	}

	.musicItem .cover {
		width: 100rpx;
		height: 100rpx;
		border-radius: 5rpx;
		margin: 0 30rpx;
	}

	.musicItem .text-group {
		margin-right: 30rpx;
		border-bottom: 1rpx solid #E4E7ED;
		flex: auto;
	}

	.musicItem .author {
		color: #303133;
		font-size: 0.8em;
	}

	
	.video_content {
		margin-top: 15upx;
		font-size: 25upx;
	}


	.content {
		height: 100%;
		width: 100%;
		position: fixed;
	}

	.title {
		font-size: 35upx;
	}

	.temp {
		/deep/ .van-button--primary {
			// padding: 0 35upx 0 35upx;
			border: 0;
			color: #ff007f;
			background-color: #ffffff;
		}
	}
</style>
